<template>
	<div class="login-content">
		<van-nav-bar title="用户注册" left-text="返回" left-arrow @click="backEvt" />
		<div class="reg-content">
			<van-form @submit="onSubmit">
				<van-cell-group inset>
					<van-field
						v-model="form.id"
						name="id"
						label="账号"
						placeholder="输入账号"
						:rules="[{ required: true, message: '请填写账号' }]"
					/>
					<van-field
						v-model="form.name"
						name="name"
						label="用户名"
						placeholder="输入用户名"
						:rules="[{ required: true, message: '请填写用户名' }]"
					/>
					<van-field
						v-model="form.password"
						name="password"
						label="密码"
						placeholder="输入密码"
						:rules="[{ required: true, message: '请填写密码' }]"
					/>
					<van-field
						name="photo"
						label="头像"
						placeholder="输入头像"
						
					>
						<template #input>
							<van-uploader v-model="form.photo" :max-count="1" :after-read="pickEvt" />
						</template>
					</van-field>
					<van-field
						name="sex"
						label="性别"
						placeholder="输入性别"
						:rules="[{ required: true, message: '请填写性别' }]"
					>
						<template #input>
							<van-radio-group v-model="form.sex" direction="horizontal">
								<van-radio name="男">男</van-radio>
								<van-radio name="女">女</van-radio>
							</van-radio-group>
						</template>
					</van-field>
					<van-field v-model="form.address" name="address" label="地址" placeholder="输入地址" />
					<van-field
						v-model="form.birthday"
						name="birthday"
						label="生日"
						placeholder="输入生日"
						@click="show = true"
					/>
					<van-field
						v-model="form.phone"
						name="phone"
						label="电话"
						placeholder="输入电话"
						:rules="[{ required: true, message: '请填写电话' }]"
					/>
				</van-cell-group>
				<div style="margin: 16px">
					<van-button @click="regAdd" round block type="primary" native-type="submit"> 注册 </van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>



<script setup lang="js">
import {reactive, ref,defineEmits} from 'vue'
import {useRouter} from 'vue-router'
import { Toast } from 'vant';
import { getReg } from '../../api/Hu';
import { useCounterStore } from '../../stores/users'

const router=useRouter()
const emit=defineEmits()
const show=ref(false)

const form = reactive({
    "id": "",
    "name": "",
    "password": "",
    "photo": [],
    "sex": "男",
    "address": "",
    "birthday": "",
    "phone": "",
})
const store =useCounterStore()


// 提交保存
function onSubmit() {
    Toast({
        message: '注册中...',
        forbidClick: true,
        duration: 0,
		
    });
}

function pickEvt(arg){
	console.log(arg.file.size);
    if (arg.file.size / 1024 / 1024 > 10) {
        Toast('图片过大');
    } else {

    }
}

/* 返回按钮事件 */
function backEvt() {
    router.push('/login')
}

async function regAdd(){
			const reg=await getReg(form)
			console.log(reg);
            if(reg.code===200){
				Toast('注册成功')
				store.setUsers(form)
                router.push('/login')
				console.log(store.usersVal);
            }else{
	           
                Toast('注册失败')
            }
		}

 

</script>


<style lang="scss" scoped>
.reg-content {
	display: block;
	position: relative;
	height: calc(100% - 46px);
	padding: 12px;
	overflow-x: hidden;
}
.van-cell-group--inset {
	margin: 0 0 12px;
}
</style>